<template>
    <div class="tec_stack">
        <div class="header">
            <h3>简介：</h3>
            <h4> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DPP的后台是基于 vite + vue3 + ts + element-plus + echarts + axios
                所构建的后台管理系统</h4>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旨在为dpp主页提供基本的信息修改</p>
        </div>
        <div class="container">
            <h3>技术栈</h3>
            <div class="tec_list">
                <ul>
                    <li style="list-style: none;">
                        <h4 style="margin: unset;">后台管理系统</h4>
                    </li>
                    <li>vue3</li>
                    <li>TS</li>
                    <li>Vite</li>
                    <li>vue-router4</li>
                    <li>pina</li>
                    <li>TinyMce</li>
                    <li>element-plus</li>
                    <li>axios</li>
                    <li>less</li>
                    <li>normalize.css</li>
                    <li>eslint</li>
                    <li>prettier</li>
                    <li>...</li>
                </ul>
                <ul>
                    <li style="list-style: none;">
                        <h4 style="margin: unset;">web前端</h4>
                    </li>
                    <li>vue3</li>
                    <li>TS</li>
                    <li>Vite</li>
                    <li>vue-router4</li>
                    <li>pina</li>
                    <li>Nuxt3</li>
                    <li>element-plus</li>
                    <li>scss</li>
                    <li>normalize.css</li>
                    <li>eslint</li>
                    <li>prettier</li>
                </ul>
                <ul>
                    <li style="list-style: none;">
                        <h4 style="margin: unset;">node-server</h4>
                    </li>
                    <li>node</li>
                    <li>expresss</li>
                    <li>cors</li>
                    <li>express-validator</li>
                    <li>jsonwebtoken</li>
                    <li>mongoose</li>
                    <li>multer</li>
                </ul>
            </div>

        </div>
        <div class="footer">
            <div class="dependencies">
                <el-table :data="dependenciescolumn" border style="width: 100%">
                    <el-table-column prop="name" label="依赖" width="220" />
                    <el-table-column prop="prop" label="版本号" width="220">
                        <template #default="{ row }">
                            <el-tag>{{ row.name }}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="devdependencies">
                <el-table :data="devdependenciescolumn" border style="width: 100%">
                    <el-table-column prop="name" label="开发依赖" width="230" />
                    <el-table-column prop="prop" label="版本号" width="220">
                        <template #default="{ row }">
                            <el-tag>{{ row.name }}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>


<script setup lang='ts'>
import config from '../../../../../package.json'
type Column = {
    name: string,
    prop: string
}

let dependenciescolumn: Column[] = []
let devdependenciescolumn: Column[] = []
for (const key of Object.entries(config.dependencies)) {
    let obj = {}
    obj[key[0]] = key[1]
    dependenciescolumn.push({ name: key[0], prop: key[1] })
}
for (const key of Object.entries(config.devDependencies)) {
    let obj = {}
    obj[key[0]] = key[1]
    devdependenciescolumn.push({ name: key[0], prop: key[1] })
}



</script>


<style scoped lang='less'>
.tec_stack {

    .header,
    .container,
    .footer {
        // height: 80px;
        background-color: white;
        border-radius: 15px;
        text-align: start;
        padding: 10px;
    }

    .container {
        margin-top: 10px;

        li {
            padding: 10px 0;
        }

        .tec_list {
            display: flex;
            justify-content: space-around;
        }
    }

    .footer {
        margin-top: 10px;
        display: flex;

        .dependencies,
        .devdependencies {
            flex: 1;
        }
    }
}
</style>